<template>
    <div class="cecls">
        <my-charts class="grid-item" :dataSource="dataSource" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"
            :title="'折线图'"></my-charts>
        <my-charts class="grid-item" :dataSource="dataSource2" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"
            :title="'柱状图'"></my-charts>
        <my-charts class="grid-item" :dataSource="dataSource3" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"
            :title="'饼状图'"></my-charts>
        <my-charts class="grid-item" :dataSource="dataSource4" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"
            :title="'散点图'"></my-charts>
    </div>
</template>

<script setup lang='ts'>

import MyCharts from '@/components/MyCharts.vue';
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
const dataSource = reactive({
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
        }
    ]
})
const dataSource2 = reactive({
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }
    ]
})
const dataSource3 = reactive({
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
            ]
        }
    ]
})
const dataSource4 = reactive({
    xAxis: {},
    yAxis: {},
    series: [
        {
            symbolSize: 20,
            data: [
                [10.0, 8.04],
                [8.07, 6.95],
                [13.0, 7.58],
                [9.05, 8.81],
                [11.0, 8.33],
                [14.0, 7.66],
                [13.4, 6.81],
                [10.0, 6.33],
                [14.0, 8.96],
                [12.5, 6.82],
                [9.15, 7.2],
                [11.5, 7.2],
                [3.03, 4.23],
                [12.2, 7.83],
                [2.02, 4.47],
                [1.05, 3.33],
                [4.05, 4.96],
                [6.03, 7.24],
                [12.0, 6.26],
                [12.0, 8.84],
                [7.08, 5.82],
                [5.02, 5.68]
            ],
            type: 'scatter'
        }
    ]
})
const canvasWidth = ref('700px')
const canvasHeight = ref('400px')
onMounted(() => {
    console.log(`the component is now mounted.`)
})

onBeforeUnmount(() => {
    console.log(`the component is now beforeUnmount.`)
})
</script>

<style scoped lang="scss">
.cecls {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 定义两列，每列等宽 */
    grid-template-rows: repeat(2, 1fr);
    /* 定义两行，每行高度动态计算 */
    gap: 10px;
    /* 网格项之间的间隙 */
}

.grid-item {
    /* 网格项样式，根据需要自定义 */
    background-color: rgba(173, 216, 230, 0.2);
    padding: 20px;
    box-sizing: border-box;
    /* 让padding不影响总宽度 */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>